import React, {Component} from 'react'
import {Route, withRouter} from 'react-router-dom'
import {MenuWrapper, MenuHeader, MenuNav, MenuItem, MenuSlider} from './MenuComponent'
import MenuCategory from './MenuCategory'
import MenuMaterial from './MenuMaterial'
import {SearchContainer} from '../../components/search'

class MenuContainer extends Component {
    state = {
        dir: 'left'
    }

    render() {
        const {dir} = this.state
        return (
            <MenuWrapper>
                <MenuHeader>
                    <MenuNav>
                        <MenuItem active={dir === 'left'} onClick={() => this.handleNavClick('left')}>分类</MenuItem>
                        <MenuItem active={dir === 'right'} onClick={() => this.handleNavClick('right')}>食材</MenuItem>
                        <MenuSlider pos={dir}></MenuSlider>
                    </MenuNav>
                </MenuHeader>
                <SearchContainer width={0} color='#ee7530' content='立即搜索'></SearchContainer>
                <div>
                    <Route path='/' exact children={props => <MenuCategory {...props}/>}/>
                    <Route path='/category' children={props => <MenuCategory {...props}/>}/>
                    <Route path='/material' children={props => <MenuMaterial {...props}/>}/>
                </div>
            </MenuWrapper>
        )
    }

    handleNavClick = (value) => {
        const {dir} = this.state;
        if (value === dir) {
            return
        }
        this.setState({
            dir: value
        })
        this.props.history.push(value === 'left' ? 'category' : 'material',{value})
    }
}

export default withRouter(MenuContainer)
